<script setup lang="ts">
import { ref, onMounted, onUpdated } from 'vue'
/**
 * ！！！
 * pageInfo为后端分页信息类的pageInfo, 确保里面有list, pageNum, navigateLastPage等属性
 * 还要提供函数 changePage以下是函数示例
const lastPage = () => {
    if (pageInfo.value.hasPreviousPage) {
        currentPage.value--
        search()
    } else {
        popMessage('已经是第一页了喵~', 'info')
    }
}
const changePage = (page: number | 'next' | 'last') => {
    switch (page) {
        case 'next':
            nextPage()
            break
        case 'last':
            lastPage()
            break
        default:
            currentPage.value = page
            search()
            break
    }
}
const nextPage = () => {
    if (pageInfo.value.hasNextPage) {
        currentPage.value++
        search()
    } else {
        popMessage('已经是最后一页了喵~', 'info')
    }
}
 * 
 */
const props = defineProps<{
    pageInfo: any,
    changePage: (types: number | 'next' | 'last') => void,
    currentPage: number
}>()

const endPage = ref()
onMounted(() => {
    endPage.value = props.pageInfo.pages
})
onUpdated(() => {
    currentPage.value = props.currentPage
    endPage.value = props.pageInfo.pages
})
/**
 * 只接受显示单数个 否则存在显示Bug
 */
const showItems = 7;
const currentPage = ref(props.currentPage)
const middle = Number(((showItems / 2)).toFixed())

</script>

<template >
    <div class="page" v-if="props.pageInfo !== undefined && props.pageInfo.pages > 1">
        <div class="pageup" @click="props.changePage('last')">
            <img src="../../assets/left.svg">
            <span>上一页</span>
        </div>
        <div v-if="endPage > 1" @click="props.changePage(1)" class="pageNum" :class="{ selected: currentPage == 1 }">
            <div>1</div>
        </div>
        <div class="omit" style="margin-left: 4px;" v-if="currentPage > middle && endPage > showItems">...</div>
        <!-- 当待显示的页数小于显示数 -->
        <!-- 直接显示全部 -->
        <template v-if="endPage <= showItems && endPage - 1 > 0">
            <div v-for="index of endPage - 1" @click="props.changePage(index + 1)" class="pageNum"
                :class="{ selected: index + 1 === currentPage }">
                <div>{{ index + 1 }}</div>
            </div>
        </template>
        <!-- 开头还未过showItems一半时 -->
        <template v-else-if="currentPage < middle">
            <div v-for="index of showItems - 2" @click="props.changePage(index + 1)" class="pageNum"
                :class="{ selected: index + 1 === currentPage }">
                <div>{{ 1 + index }}</div>
            </div>
        </template>
        <!-- 到达末尾，后面的省略号隐藏时 -->
        <template v-else-if="middle >= endPage - currentPage && endPage > showItems">
            <div v-for=" index  of  showItems - 2 " @click="props.changePage(endPage - (showItems - 1 - index))"
                class="pageNum" :class="{ selected: endPage - (showItems - 1 - index) === currentPage }">
                <div>{{ endPage - (showItems - 1 - index) }}</div>
            </div>
        </template>
        <!-- 处于中间 -->
        <template v-else>
            <div v-for=" index  of  showItems - 2 " @click="props.changePage(index - (middle - 1) + currentPage)"
                class="pageNum" :class="{ selected: index - (middle - 1) === 0 }">
                <div>{{ index - (middle - 1) + currentPage }}</div>
            </div>
        </template>
        <div class="omit" style="margin-left: 4px;" v-if="middle < endPage - currentPage && endPage > showItems">...</div>
        <div @click="props.changePage(props.pageInfo.pages)" class="pageNum" :class="{ selected: currentPage === endPage }"
            v-if="endPage > showItems">
            <div>{{ props.pageInfo.pages }}</div>
        </div>
        <div class="pagedown" style="margin-left: 5px;" @click="props.changePage('next')">
            <span>下一页</span>
            <img src="../../assets/right.svg">
        </div>
    </div>
    <!-- <div class="page" v-if="props.pageInfo != undefined && props.pageInfo.navigateLastPage > 1">
        <div class="pageup" @click="props.changePage('last')">
            <img src="../../assets/left.svg">
            <span>上一页</span>
        </div>
        <template v-for="item in props.pageInfo.pages">
            <div @click="props.changePage(1)" class="pageNum" v-if="item === 1"
                :class="{ selected: item === props.pageInfo.pageNum }">
                <div>1</div>
            </div>
            <div class="omit" style="margin-left: 4px;"
                v-if="item === props.pageInfo.pageNum - 5 ||
                item === props.pageInfo.pageNum + 5">...</div>
            <div class="pageNum" :class="{ selected: item === props.pageInfo.pageNum }" 
                v-if="item > props.pageInfo.pageNum - 5 &&
                    item < props.pageInfo.pageNum + 5 &&
                    item !== props.pageInfo.navigateFirstPage &&
                    item !== props.pageInfo.pages" 
                    @click="props.changePage(item)">
                <div>{{ item }}</div>
            </div>
            <div class="pageNum" v-if="item === props.pageInfo.pages"
                :class="{ selected: item === props.pageInfo.pageNum }"
                @click="props.changePage(props.pageInfo.pages)">
                <div>{{ props.pageInfo.pages }}</div>
            </div>
        </template>

        <div class="pagedown" style="margin-left: 5px;" @click="props.changePage('next')">
            <span>上一页</span>
            <img src="../../assets/right.svg">
        </div>
    </div> -->
</template>

<style scoped lang="css">
.page {
    display: flex;
    justify-content: center;
    color: #333;
    height: 26px;
    margin: 12px 0;
    -moz-user-select: none;
    /* Safari 和 欧朋 */
    -webkit-user-select: none;
    /* IE10+ and Edge */
    -ms-user-select: none;
    /* Standard syntax 标准语法(谷歌) */
    user-select: none;
}

.page img {
    height: 13px;
    margin: auto 0;
}

.page .pageup,
.page .pagedown {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    height: 24px;
    font-size: 12px;
    padding: 0 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #EDEDED;
    background-image: radial-gradient(circle at 25px 20px, #fff, #F9F9F9);
}

.page .pageup:hover,
.page .pagedown:hover,
.pageNum:hover {
    cursor: pointer;
    filter: brightness(1.1);
}

.page .pageup .btn-warp {
    height: 12px;
}

.page .pageup span {
    display: block;
}

.page .pageNum {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
    width: 22px;
    color: #333;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.page .selected {
    cursor: default;
    border: 1px solid #A2161B;
    color: #fff;
    background-image: radial-gradient(circle at 25px 20px, #CD1113, #ED1F29);
}

.page .selected:hover {
    filter: none;
}
</style>